<!-- <script setup></script> -->
 
<template>
 
  <div>
    <!-- 1.{{  }} : 文本插值 -->
    <div>"============1.文本插值================="</div>
    Hello World
    <h1>{{name}}</h1>
    <div><h2>{{age > 60 ? '老年' : '青年'}}</h2></div>

    <!-- 2.属性绑定  v-bind:xxx 简写为：xxx-->
    <div>"============2.属性绑定================="</div>
    <div>
      <div><input type="text" v-bind:value = "b_name"></div>
      <div><input type="text" :value = "b_age"></div>
      <!-- 简写onclick -->
      <div><img :src="src"></div>
    </div>

    <!-- 3.事件绑定 v-on:click  简写为 @XX-->
    <div>"============3.事件绑定================="</div>
    <div>
      <button v-on:click="handClick">v-on点击我</button>
      <button @click="handClick2">@点击我</button>
    </div>    
    <!-- 4.双向绑定：v-model -->
    <div>"============4.双向绑定================="</div>
    <div>
      <div>{{m_num }}</div>
      <input type="text" v-model="m_num">
      <button @click="numAdd">加1</button>
      <button @click="numSub">减1</button>

    </div>

    <!-- 条件渲染：v-if,v-else,v-elseif -->
    <div>"============5.条件渲染 v-if,v-else,v-elseif================="</div>
    <div>
      <div v-if="sex == 1">男</div>
      <div v-else-if="sex ==2">女</div>
      <div v-else>人妖</div>
    </div>

    <!-- 6.调用axios发送后端请求 -->
    <div>
      <button @click="testPost">发送post请求</button>
      <button @click="testPost2">发送post2请求</button>
    </div>


    <!-- 7.使用js实现路由跳转 -->
    <div>================7.使用router-link和js实现路由跳转=================</div>
    <div>
      <router-link to="/">首页</router-link>
      <input type="button" value="编程式跳转路由" @click="jump(2)">
      <input type="button" value="编程式跳转不存在路由" @click="jump(1)">
    </div>

  </div>
 
</template>
 
<style scoped></style>

<script>
  export default {
    methods:{
      handClick(){
        alert("v-on:click:==handClick")
      },
      handClick2(){
        alert("@点击我:==handClick2")
      },
      numAdd(){
        this.m_num++
      },
      numSub(){
        this.m_num--
      },
      testPost(){
        const param = {
          username:this.name,
          password:this.age
        }
        this.$axios.post("/test/testPost",param).then(res => {
          alert(res.data);
        }
        )
      },
      testPost2(){
        const param = {
          username:this.name,
          password:this.age
        }
        this.$axios.post("/test/testPost2",param).then(res => {
          alert(res.data);
        }
        )
      },

      jump(a){
        console.log("====",a);
        if(a==2){
          this.$router.push('/');
        }else {
          this.$router.push('/test');  // 不存在的页面
        }
        
      }
    },
    data(){
      return {
        name:"yuyu",
        age:40,
        b_name:"b_yuyu",
        b_age:"18",
        src:"https://www.itheima.com/images/logo.png",
        b_email:"2589211847@qq.com",

        m_num:10,

        sex:3
      }
    }
    
  }

</script>